/* jshint esversion: 6 */
(() => {
    // 按钮
    PetUI.button = (text, Background, BackgroundHighlighting) => {
        var button = PetUI('button');
        button.Background = Background ? Background : '#4CAF50';
        button.BackgroundHighlighting = BackgroundHighlighting ? BackgroundHighlighting : '#008CBA';
        // 默认CSS样式
        button.CSS({
            'width': '100px',
            'height': '50px',
            'background-color': button.Background,
            'border': 'none',
            'border-radius': '10px',
            'text-align': 'center',
            'text-decoration': 'none',
            'display': 'inline - block',
            'font-size': '16px'
        });
        // 按下事件
        button.Element.Mousedown = (e) => { button.CSS({ 'background-color': button.BackgroundHighlighting }); };
        // 移出事件
        button.Element[PetExpand.prototype.HasTouch() ? "Mouseup" : 'Mouseout'] = (e) => { button.CSS({ 'background-color': button.Background }); };
        // 设置事件
        button.Element.Set_Element();
        button.innerText = text;
        return button;
    };
    // 进度条
    PetUI.ProgressBar = (width, percent) => {
        var div = PetUI('div', {
            CSS: {
                'width': width ? width + 'px' : '300px',
                'height': '20px',
                'word-wrap': 'break-word',
                'overflow': 'hidden',
                'border-radius': '10px'
            }
        });
        var Bubble = div.$('div');
        div.Bubble = Bubble;
        Bubble.CSS({
            'width': percent ? percent + '%' : "1px",
            'height': '20px',
            'opacity': 0.5,
            'border-radius': '10px'
        });
        // 设置百分比
        div.__Percent = percent;
        div.Percent = (percent) => {
            if (percent) {
                div.__Percent = percent;
                Bubble.CSS({ 'width': percent ? percent + '%' : "1px" });
                return div;
            }
            return div.__Percent;
        };
        // 设置样式
        div.Style = (id) => {
            var s = PetUI.Style[id];
            if (s) {
                div.CSS({
                    background: s[0] ? s[0] : "",
                    border: '1px solid ' + (s[1] ? s[1] : ""),
                    'box-shadow': '5px 5px 5px' + (s[2] ? s[2] : "")
                });
                if (s[3]) {
                    Bubble.CSS({ 'background': s[3] });
                }
            }
            return div;
        };
        div.Style(0);
        return div;
    };
    // 进度条样式
    PetUI.Style = [
        ['#FFF0F5', '#FFE4E1', '#f8e0e0', '#bbe1f1'],
        ['#f0fbeb', '#bbe1f1', '#bbe1f1', '#cceff5'],
        ['#eefaff', '#cceff5', '#cceff5', '#ffcc00'],
        ['#fafcfd', '#ffcc00', '#ffcc00', '#cee3e9'],
        ['#fffff7', '#cee3e9', '#cee3e9', '#a9c9e2'],
        ['#f1f7f9', '#a9c9e2', '#a9c9e2', '#e3e197'],
        ['#e8f5fe', '#e3e197', '#e3e197', '#adcd3c'],
        ['#ffffdd', '#adcd3c', '#adcd3c', '#bfd1eb'],
        ['#f2fddb', '#bfd1eb', '#bfd1eb', '#a5b6c8'],
        ['#f3faff', '#a5b6c8', '#a5b6c8', '#f8e0e0'],
        ['#eef3f7']
    ];
    // 选择按钮
    PetUI.Selection = () => {
        var div = PetUI('div', {
            CSS: {
                'width': '60px',
                'height': '20px',
                'background': '#cceff5', // 背景颜色
                'border': '2px solid #bbe1f1', // 边框颜色
                'border-radius': '10px',
                'box-shadow': '5px 5px 5px #bbe1f1' // 影子颜色
            }
        });
        var state = div.$('div');
        state.CSS({
            'top': "-1px",
            'left': "-1px",
            'width': parseInt(div.style.height) + "px",
            'height': parseInt(div.style.height) - 2 + 'px',
            'position': 'relative',
            'border-radius': '10px',
            'background': '#eefaff',
            'border': '2px solid #ffcc00'
        });
        div.Click = () => { };
        // 修改状态
        div.SetStatus = (status) => {
            if (status) {
                div.status = true;
                state.style.left = parseInt(div.style.width) - (parseInt(state.style.width) + 4) + 'px';
            } else {
                div.status = false;
                state.style.left = '0px';
            }
            if (div.Click) { div.Click(); }
            return div;
        };
        div.SetStatus(false);
        // 点击事件
        div.Element.Click = (e) => {
            div.SetStatus(!div.status);
        };
        // 设置事件
        div.Element.Set_Element();
        return div;
    };
    // 菜单栏
    PetUI.JMenuBar = () => {
        var div = PetUI('div');
        div.border = '#bbe1f1';
        div.Background = '#cceff5';
        div.SubmenuColor = '#f0fbeb';
        div.BackgroundHighlighting = "#4CAF50";
        div.CSS({
            'width': '150px',
            'height': '100%',
            'padding': '10px 10px 10px 10px',
            'display': 'block',
            'background': div.Background, // 背景颜色
            'border': '2px solid ' + div.border, // 边框颜色
            'border-radius': '10px',
            'box-shadow': '5px 5px 5px ' + div.border// 影子颜色
        });
        div.CreateMenu = CreateMenu = (name, n) => {
            var menu = PetUI.button(name);
            n = n ? n : 0;
            menu.Background = div.Background;
            menu.BackgroundHighlighting = div.BackgroundHighlighting;
            menu.CSS({
                "border": '1px solid ' + div.border,
                'width': 'calc(100% - ' + n * 10 + 'px)',
                'height': '50px',
                'background': div.Background,
                'margin-left': n * 10 + 'px',
                'border-radius': '20%'
            });
            // 子菜单
            menu.Submenu = [];
            menu.DisplaySubmenu = true;
            menu.Element.Dblclick = () => {
                menu.DisplaySubmenu = !menu.DisplaySubmenu;
                menu.SetTheDisplay(menu.DisplaySubmenu);
            };
            menu.SetTheDisplay = (state) => {
                var Submenu = menu.Submenu,
                    tate = tate ? true : false;
                menu.DisplaySubmenu = state ? true : false;
                for (var i = 0; i < Submenu.length; i++) {
                    var element = Submenu[i];
                    if (element.Submenu.length != 0) {
                        element.SetTheDisplay(tate);
                    }
                    element.Element.Display(state);
                }
            };
            menu.AddSubmenu = (...submenu) => {
                menu.Submenu.push(...submenu);
                return menu;
            };
            menu.Element.Set_Element();
            // 创建完成
            div.$(menu);
            return menu;
        };
        return div;
    };
    // 提示
    var Frame = PetUI('div');
    Frame.CSS("opacity: 0.9;width: " + (PetExpand.prototype.IsPC() ? '50%' : '90%') + ";height: 40px;padding: 10px;margin: 0 auto;text-align: center;border-radius: 20px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;");
    Frame.Initialize = true;
    PetUI.Prompt = (notice, form) => {
        var div = Frame.$('div');
        form = form || 0;
        div.CSS("height: 40px;padding: 10px;margin: 0 auto;text-align: center;border-radius: 20px;top: 0;left: 0;right: 0;bottom: 0;");
        var s = PetUI.Style[form];
        if (s) {
            div.CSS({
                background: s[1],
                border: '1px solid ' + s[2],
                'box-shadow': '5px 5px 5px' + s[3]
            });
        }
        div.innerText = notice;
        window.setTimeout(() => {
            div.Destroy();
        }, 5000);
        // 返回底层
        if (Frame.Initialize) {
            Frame.Child();
            Frame.Initialize = false;
        }
        return Frame;
    };
    // 注册 AddHandler
    PetUI.AddHandler = (id) => {
        document.getElementById(id).AddHandler = function (type, handler, ...use) {
            if (this.addEventListener) {
                this.addEventListener(type, handler, use ? use : false);
            } else if (this.attachEvent) {
                this.attachEvent("on" + type, handler, use);
            } else {
                this["on" + type] = handler;
            }
        };
    };
})();